import React, { forwardRef } from 'react';
import './index.scss';

export interface TitleHeaderProps {
  title?: string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  onClick?: () => void;
  style?: React.CSSProperties;
  className?: string;
  iconUrl?: string;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const TitleHeader = forwardRef<HTMLDivElement, TitleHeaderProps>(function TitleHeader({
  title = '小时运力图',
  noResponsiveScale = false,
  onClick,
  style = {},
  className = '',
  iconUrl,
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) {

  const handleClick = () => {
    onClick?.();
  };

  const titleHeaderClassName = [
    'hzdz-title-header',
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={titleHeaderClassName}
      style={style}
      onClick={handleClick}
      {...otherProps}
    >
      {/* 蓝色圆圈图标 */}
      <img
        className="hzdz-title-header__circle-icon"
        src="http://localhost:8085/static/images/蓝色圆圈.png"
        alt="圆圈图标"
      />

      {/* 标题文字 */}
      <span className="hzdz-title-header__title">{title}</span>

      {/* 蓝色线 */}
      <img
        className="hzdz-title-header__line-icon"
        src="/static/images/蓝色线.png"
        alt="分隔线"
      />

      {/* 蓝色向左箭头 */}
      <img
        className="hzdz-title-header__arrow-icon"
        src="http://localhost:8085/static/images/蓝色向左的箭头.png"
        alt="箭头"
      />
      {iconUrl && (
        <img
          className="hzdz-title-header__custom-icon"
          src={iconUrl}
          alt="自定义图标"
        />
      )}
    </div>
  );
});

export default TitleHeader;
